<template>
      <Row>
        <Col span="16" class-name="left-content">
          <article-list :article-list="dataList" />
          <Page :total="total" size="small" show-elevator show-sizer @on-change="pageNoChange"  @on-page-size-change="pageSizeChange"/></Col>
        <Col span="8" class-name="right-content">
          <Timeline>
        <TimelineItem>
            <p class="time">1976年</p>
            <p class="content">Apple I 问世</p>
        </TimelineItem>
        <TimelineItem>
            <p class="time">1984年</p>
            <p class="content">发布 Macintosh</p>
        </TimelineItem>
        <TimelineItem>
            <p class="time">2007年</p>
            <p class="content">发布 iPhone</p>
        </TimelineItem>
        <TimelineItem>
            <p class="time">2010年</p>
            <p class="content">发布 iPad</p>
        </TimelineItem>
        <TimelineItem>
            <p class="time">2011年10月5日</p>
            <p class="content">史蒂夫·乔布斯去世</p>
        </TimelineItem>
    </Timeline>
        </Col>
      </Row>
</template>
<script>
import ArticleList from '@/components/articleList'
import axios from 'axios'
    export default {
        name: 'index',
        components: {
          'article-list': ArticleList
        },
        data() {
          return {
            dataList: [],
            total: 0,
            pageNo:1,
            pageSize:10
          }
        },
        methods: {
          pageNoChange(val) {
            console.log("改变页数", val)
            this.pageNo = val
            this.getArticleList()
            document.body.scrollTop = document.documentElement.scrollTop = 0;
          },
          pageSizeChange(val) {
            this.pageNo = 1
            this.pageSize = val
            this.getArticleList()
            document.body.scrollTop = document.documentElement.scrollTop = 0;
          },
          getArticleList() {
            const self = this
            axios.get('/getAllArticle', {
              params:{
                pageNo: self.pageNo,
                pageSize: self.pageSize
              }
            }).then(res => {
              self.dataList = res.data
              self.total = parseInt(res.headers.total)
              console.log(res.data)
              console.log(res.headers.total)
            })
          }
        },
        mounted() {
          this.getArticleList()
        }
    }
</script>
<style scoped>
.left-content{
  border-right: 1px solid #eeeeee;
  min-height: 500px;
  padding: 30px 20px;
}
.right-content{
  padding: 30px 20px;
}
</style>